<script>
export default{
	name:"app",
	watch: {
		$route (to, from ) {
			this.init();
		}
	},
	methods:{
		init(){
			//加载
			setTimeout(function(){
				try{
					var height=window.innerHeight;
					var classNames=document.getElementsByClassName("box")[0];
					classNames.style.height=height+"px";
					window.onresize=function(){
						//监听屏幕变化
						var width=window.innerWidth-5;
						var height=window.innerHeight;
						var classNames=document.getElementsByClassName("box")[0];
						classNames.style.height=height+"px";
						classNames.style.width=width+"px";
					}
				}catch(e){
					//TODO handle the exception
				}
			},50)
			
		}
	}
}

</script>
<template>
	<div id="app" class="app">
		<router-view></router-view>
	</div>
</template>
<style>
*{
    margin: 0;
    padding: 0;
	-moz-user-select:none; /*火狐*/
	-webkit-user-select:none; /*webkit浏览器*/
	-ms-user-select:none; /*IE10*/
	-khtml-user-select:none; /*早期浏览器*/
	user-select:none;
}

body {
    background: #f2f2f2;
}
	
ul {
    list-style: none;
}

a {
    text-decoration: none;
    cursor: pointer
}

a:hover {
    text-decoration: none;
    cursor: pointer
}

.hover {
    cursor: pointer
}

.box {
    width: 100%;
    background: #f2f2f2;
	overflow: hidden;
}

.left {
    float: left;
}

.right {
    float: right;
}

.fixed {
    position: fixed;
}

.myhide {
    display: none;
}

.myshow {
    display: block;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 5px;
    /*  background-color: aqua; */
}

/* 滚动槽 */
::-webkit-scrollbar-track {
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: black;
}
.form-control{border-radius: 0px;}
.input-group-addon{border-radius: 0px;}
.list-box{margin:0 auto;background:#fff;width:98%;margin-top:10px;}
/*等待加载开始*/
.blinking{
    width: 80px;
	height: 80px;
	border-radius: 5px;
	position: relative;
	padding: 8px;
	margin: 0 auto;
}
.blinking span{
     width: 20px;
	height: 8px;
	display: inline-block;
	border-radius: 20px;
	background: #00ade5;
	position: absolute;
	left: 50%;
	top: 50%;
	animation: 1s blink infinite;
	transform-origin: left top;
}
@keyframes blink{
    0%{
        opacity: 0.4;
    }
    30%{
        opacity: 0.6;
    }
    60%{
        opacity: 0.8;
    }
    100%{
        opacity: 1;
    }
}

.blinking span:first-child{
    transform:rotate(45deg) translateX(18px);
    animation-delay: 0.125s;
}
.blinking span:nth-child(2){
    transform:rotate(90deg) translateX(18px);
    animation-delay: 0.25s;
}
.blinking span:nth-child(3){
    transform:rotate(135deg) translateX(18px);
    animation-delay: 0.375s;
}
.blinking span:nth-child(4){
    transform:rotate(180deg) translateX(18px);
    animation-delay: 0.5s;
}
.blinking span:nth-child(5){
    transform:rotate(225deg) translateX(18px);
    animation-delay: 0.625s;
}
.blinking span:nth-child(6){
    transform:rotate(270deg) translateX(18px);
    animation-delay: 0.75s;
}
.blinking span:nth-child(7){
    transform:rotate(315deg) translateX(18px);
    animation-delay: 0.875s;
}
.blinking span:nth-child(8){
    transform:rotate(360deg) translateX(18px);
    animation-delay: 0s;
}
/*等待加载结束*/
</style>
